<script setup>
import { ref } from 'vue';

const isEdit = ref([false, false, false, false, false, false])

const basicTags = ref(['26年应届生', '本科', '在校-考虑机会', '155******26'])
const basicTagFinish = () => {
    const basicTags = document.querySelectorAll('.basicTag')
    basicTags.value = Array.from(basicTags).filter(item => !item.classList.contains('ant-tag-hidden')).map(item => item.innerText)
    isEdit.value[0] = false
}
const newTag = ref('')
const addBasicTag = () => {
    basicTags.value.push(newTag.value)
    newTag.value = ''
}

const personalAd = ref('个人优势')

const experience = ref({
    'company': '坤崧公司',
    'job': '工程师',
    'tags': ['人工智能', '机器学习', '图像识别', 'Python'],
    'content': '这是工作/实习经历'
})
const exFinish = () => {
    const exTags = document.querySelectorAll('.exTag')
    experience.value.tags = Array.from(exTags).filter(item => !item.classList.contains('ant-tag-hidden')).map(item => item.innerText)
    isEdit.value[3] = false
}
const addExTag = () => {
    experience.value.tags.push(newTag.value)
    newTag.value = ''
}
</script>

<template>
    <div class="container">
        <a-descriptions title="张三">
            <template #extra>
                <a-button type="primary" v-if="!isEdit[0]" @click="() => isEdit[0] = true">编辑</a-button>
                <a-button type="primary" v-if="isEdit[0]" @click="basicTagFinish">确认修改</a-button>
            </template>
            <a-descriptions-item label="" v-if="!isEdit[0]">
                <a-tag v-for="tag in basicTags">{{ tag }}</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="" v-if="isEdit[0]">
                <a-tag v-for="tag in basicTags" closable class="basicTag">{{ tag }}</a-tag>
                <a-input-search v-model:value="newTag" enter-button="添加" size="small" @search="addBasicTag"
                    style="width: 150px; position: relative; top: 7px;" />
            </a-descriptions-item>
        </a-descriptions>
        <a-divider style="height: 1px; background-color: grey" />

        <a-descriptions title="个人优势">
            <template #extra>
                <a-button type="primary" v-if="!isEdit[1]" @click="() => isEdit[1] = true">编辑</a-button>
                <a-button type="primary" v-if="isEdit[1]" @click="() => isEdit[1] = false">确认修改</a-button>
            </template>
            <a-descriptions-item label="" v-if="!isEdit[1]">
                {{ personalAd }}
            </a-descriptions-item>
            <a-descriptions-item label="" v-if="isEdit[1]">
                <a-textarea v-model:value="personalAd" auto-size showCount :maxlength="200" style="width: 75%;" />
            </a-descriptions-item>
        </a-descriptions>
        <a-divider style="height: 1px; background-color: grey" />

        <a-descriptions title="期望职位">
            <template #extra>
                <a-button type="primary" v-if="!isEdit[2]" @click="() => isEdit[2] = true">编辑</a-button>
                <a-button type="primary" v-if="isEdit[2]" @click="() => isEdit[2] = false">确认修改</a-button>
            </template>
            <a-descriptions-item label="">
                <a-tag>全职</a-tag>
                <a-tag>机器学习</a-tag>
                <a-tag>面议</a-tag>
                <a-tag>北京</a-tag>
            </a-descriptions-item>
        </a-descriptions>
        <a-divider style="height: 1px; background-color: grey" />

        <a-descriptions title="工作/实习经历" :column="1">
            <template #extra>
                <a-button type="primary" v-if="!isEdit[3]" @click="() => isEdit[3] = true">编辑</a-button>
                <a-button type="primary" v-if="isEdit[3]" @click="exFinish">确认修改</a-button>
            </template>
            <a-descriptions-item label="" v-if="!isEdit[3]">
                {{ `${experience.company} - ${experience.job}` }}
            </a-descriptions-item>
            <a-descriptions-item label="" v-if="!isEdit[3]">
                <a-tag v-for="tag in experience.tags">{{ tag }}</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="内容" v-if="!isEdit[3]">
                {{ experience.content }}
            </a-descriptions-item>

            <a-descriptions-item label="" v-if="isEdit[3]">
                公司：<a-input v-model:value="experience.company" style="width: 300px; margin-right: 20px;" allowClear />
                职位：<a-input v-model:value="experience.job" style="width: 300px;" allowClear />
            </a-descriptions-item>
            <a-descriptions-item label="" v-if="isEdit[3]">
                <a-tag v-for="tag in experience.tags" class="exTag" closable>{{ tag }}</a-tag>
                <a-input-search v-model:value="newTag" enter-button="添加" size="small" @search="addExTag"
                    style="width: 120px; position: relative; top: 7px;" />
            </a-descriptions-item>
            <a-descriptions-item label="内容" v-if="isEdit[3]">
                <a-textarea v-model:value="experience.content" auto-size showCount :maxlength="200"
                    style="width: 75%;" />
            </a-descriptions-item>
        </a-descriptions>
        <a-divider style="height: 1px; background-color: grey" />

        <a-descriptions title="项目经历">
            <template #extra>
                <a-button type="primary" v-if="!isEdit[4]" @click="() => isEdit[4] = true">编辑</a-button>
                <a-button type="primary" v-if="isEdit[4]" @click="() => isEdit[4] = false">确认修改</a-button>
            </template>
            <a-descriptions-item label="">
                暂无
            </a-descriptions-item>
        </a-descriptions>
        <a-divider style="height: 1px; background-color: grey" />

        <a-descriptions title="教育经历" :column="1">
            <template #extra>
                <a-button type="primary" v-if="!isEdit[5]" @click="() => isEdit[5] = true">编辑</a-button>
                <a-button type="primary" v-if="isEdit[5]" @click="() => isEdit[5] = false">确认修改</a-button>
            </template>
            <a-descriptions-item label="">湖南大学 2022-2026</a-descriptions-item>
            <a-descriptions-item label="">
                <a-tag>软件工程</a-tag>
                <a-tag>本科</a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="经历">
                这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字<br>
                这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字<br>
                这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字这是很多文字
            </a-descriptions-item>
        </a-descriptions>
    </div>
</template>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>